<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="130px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="服务费模板名称：">
                  <el-input v-model="from.exchangeFeeTemplateName" placeholder="请输入服务费模板名称" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="服务费模板编号：">
                  <el-input v-model="from.exchangeFeeTemplateNo" placeholder="请输入服务费模板编号" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="是否默认模板：">
                  <el-select v-model="from.isDefault" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="2" label="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.status" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="关闭"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-circle-plus-outline" type="primary" @click="add()">新增</el-button>
          <el-button class="mr10" size="small" icon="el-icon-delete" type="danger" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" icon="el-icon-top" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="exchangeFeeTemplateName" label="服务费模板名称" min-width="80" />
        <el-table-column prop="exchangeFeeTemplateNo" label="服务费模板编号" min-width="80" />
        <el-table-column prop="isDefault" label="是否默认模板" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.isDefault == 1">是</el-button>
            <el-button size="mini" v-if="scope.row.isDefault == 2">否</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button size="mini" v-if="scope.row.status == 2">关闭</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetails(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog
      :visible.sync="visible"
      width="700px">
      <el-table border :data="exchangeFeeTemplateDtlList" height="250" border style="width: 100%">
        <el-table-column prop="commodityName" label="品种名称" width="120">
        </el-table-column>
        <el-table-column prop="commodityNo" label="品种代码" width="120">
        </el-table-column>
        <el-table-column label="手续费">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
              <el-input placeholder="请输入手续费" :disabled="true" style="width: 200px;margin-right: 30px;" v-model="scope.row.tradeFee">
                <template slot="append">{{scope.row.currencyName}}</template>
              </el-input>
              <span>范围：{{scope.row.minFee}}-{{scope.row.maxFee}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="ruleForm.id?'编辑':'新增'" :visible.sync="dialogVisible" width="820px"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="150px">
        <el-form-item label="服务费模板名称：" prop="exchangeFeeTemplateName">
          <el-input v-model="ruleForm.exchangeFeeTemplateName"></el-input>
        </el-form-item>
        <el-form-item label="服务费模板编号：" prop="exchangeFeeTemplateNo">
          <el-input v-model="ruleForm.exchangeFeeTemplateNo"></el-input>
        </el-form-item>
        <el-form-item label="手续费设置：" prop="exchangeFeeTemplateDtlList">
          <el-table border :data="ruleForm.exchangeFeeTemplateDtlList" height="250" border style="width: 100%">
            <el-table-column prop="commodityName" label="品种名称" width="120">
            </el-table-column>
            <el-table-column prop="commodityNo" label="品种代码" width="120">
            </el-table-column>
            <el-table-column label="手续费">
              <template slot-scope="scope">
                <div style="display: flex;justify-content: flex-start;align-items: center;">
                  <el-input placeholder="请输入手续费" style="width: 200px;margin-right: 30px;" v-model="scope.row.tradeFee">
                    <template slot="append">{{scope.row.currencyName}}</template>
                  </el-input>
                  <span>范围：{{scope.row.minFee}}-{{scope.row.maxFee}}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="是否默认模板：">
          <el-radio-group v-model="ruleForm.isDefault">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    exchangecommodityGetAll,
    exchangefeetemplateList,
    exchangefeetemplateSave,
    exchangefeetemplateInfo,
    exchangefeetemplateUpdate,
    exchangefeetemplateDelete,
    exchangefeetemplateExport
  } from '@/api/agent'
  export default {
    name: 'currency',
    data() {
      return {
        labelPosition: 'right',
        from: {
          exchangeFeeTemplateName: '',
          exchangeFeeTemplateNo: '',
          isDefault: '',
          status: 1,
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        selection: [],
        dialogVisible: false,
        ruleForm: {
          id: '',
          exchangeFeeTemplateName: '',
          exchangeFeeTemplateNo: '',
          exchangeFeeTemplateDtlList: [],
          isDefault: '',
          status: 1,
          remark: '',
        },
        rules: {
          exchangeFeeTemplateName: [{
            required: true,
            message: '请填写服务费模板名称',
            trigger: 'blur'
          }],
          exchangeFeeTemplateNo: [{
            required: true,
            message: '请填写服务费模板编号',
            trigger: 'blur'
          }],
        },
        exchangeFeeTemplateDtlList:[],
        visible:false
      }
    },
    mounted() {
      this.getlist()
    },
    methods: {
      search() {
        console.log(this.from)
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          exchangeFeeTemplateName: '',
          exchangeFeeTemplateNo: '',
          isDefault: '',
          status: 1,
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      getlist() {
        this.loading = true
        exchangefeetemplateList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      add() {
        this.ruleForm = {
          id: '',
          exchangeFeeTemplateName: '',
          exchangeFeeTemplateNo: '',
          exchangeFeeTemplateDtlList: [],
          isDefault: '',
          status: 1,
          remark: '',
        }
        exchangecommodityGetAll(0).then(res => {
          console.log('品种手续费全列表', res)
          this.ruleForm.exchangeFeeTemplateDtlList = res
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      close() {
        this.ruleForm = {
          id: '',
          exchangeFeeTemplateName: '',
          exchangeFeeTemplateNo: '',
          exchangeFeeTemplateDtlList: [],
          isDefault: '',
          status: 1,
          remark: '',
        }
        this.dialogVisible = false
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              exchangefeetemplateUpdate(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                exchangeFeeTemplateName: this.ruleForm.exchangeFeeTemplateName,
                exchangeFeeTemplateNo: this.ruleForm.exchangeFeeTemplateNo,
                exchangeFeeTemplateDtlList: this.ruleForm.exchangeFeeTemplateDtlList,
                isDefault: this.ruleForm.isDefault,
                status: this.ruleForm.status,
                remark: this.ruleForm.remark,
              }
              exchangefeetemplateSave(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      // 选择
      onSelectTab(selection) {
        this.selection = []
        selection.forEach(item => {
          this.selection.push(item.id)
        })
        console.log(this.selection)
      },
      allDel() {
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log(this.selection)
        this.$confirm('确认删除？')
          .then(_ => {
            exchangefeetemplateDelete(this.selection).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      exportTable() {
        exchangefeetemplateExport(this.from).then(res => {
          console.log('导出表格', res)
          window.open(res.filename);
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDetails(row){
        exchangecommodityGetAll(row.id).then(res => {
          console.log('品种手续费全列表', res)
          this.exchangeFeeTemplateDtlList = res
          this.visible = true
        }).catch(err => {
          console.log(err)
        })
      },
      handleEdit(row) {
        console.log('编辑', row)
        exchangefeetemplateInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            exchangeFeeTemplateName: res.exchangeFeeTemplateName,
            exchangeFeeTemplateNo: res.exchangeFeeTemplateNo,
            exchangeFeeTemplateDtlList: res.exchangeFeeTemplateDtlList,
            isDefault: Number(res.isDefault),
            status: Number(res.status),
            remark: res.remark,
          }
          exchangecommodityGetAll(row.id).then(reser => {
            console.log('品种手续费全列表', reser)
            this.ruleForm.exchangeFeeTemplateDtlList = reser
            this.dialogVisible = true
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            exchangefeetemplateDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style scoped lang="scss">
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
</style>
